<template>
	<u-card
		margin="20rpx 2px"
		padding="10"
		:border="true"
		:head-border-bottom="false"
		:body-style="{
			paddingTop: 0
		}"
		box-shadow="2px 0 5px rgba(180, 180, 180, 0.1),-2px 0 5px rgba(180, 180, 180, 0.1),0 2px 5px rgba(180, 180, 180, 0.1),0 -2px 5px rgba(180, 180, 180, 0.1)"
	>
		<template #head>
			<view class="title-box">
				<u-text :bold="true" :size="17" :text="props.item.title"></u-text>
				<up-icon name="/static/common/more-icon.png" :width="17" height="17" />
			</view>
		</template>
		<template #body>
			<view class="description">
				<u-text :text="props.item.description" :size="14" :lines="1"></u-text>
			</view>
			<view class="tag-content">
				<scroll-view class="tag-box" :show-scrollbar="false" :scroll-x="true" enable-flex>
					<view class="tag-item-box" v-for="(tagItem, index) in props.item.labels" :key="`tag_${props.item.id}_${index}`">
						<up-tag shape="circle" :text="tagItem.name" size="mini" bgColor="#F5F5F5" color="#666" borderColor="#F5F5F5" />
					</view>
				</scroll-view>
				<view class="location-box">
					<u-text size="13" color="#999" align="right" text="洪山区 光谷"></u-text>
				</view>
			</view>
			<view class="price-box">
				<u-text size="16" color="#F15816" lineHeight="22.4" bold :text="`¥${props.item.cashReward}`"></u-text>
			</view>
			<view class="attachment-content">
				<scroll-view class="attachment-box" :show-scrollbar="false" :scroll-x="true" enable-flex>
					<view class="attachment-item-box" v-for="(imgItem, index) in props.item.attachments" :key="`img_${props.item.id}_${index}`">
						<up-image width="100" height="100" radius="6" :src="imgItem.url" lazyLoad>
							<template v-slot:loading>
								<u-loading-icon color="#00CB6B"></u-loading-icon>
							</template>
						</up-image>
					</view>
				</scroll-view>
			</view>
			<view class="detail-content">
				<view class="detail-left">
					<u-text color="#777777" size="12" :text="`投标${props.item.biddingCounts}`" wordWrap="nowrap"></u-text>
					<u-text color="#777777" margin="0 0 0 5rpx" size="12" :text="`浏览${props.item.viewCounts}`" wordWrap="nowrap"></u-text>
				</view>
				<view class="detail-right">
					<view class="detail-item-box" @click="handleTask('collected')">
						<up-icon v-if="props.item.collected" :size="24" name="/static/solver-home/recommend/collection-icon-active.png"></up-icon>
						<up-icon v-else :size="24" name="/static/solver-home/recommend/collection-icon.png"></up-icon>
						<u-text margin="0 0 0 10rpx" :color="props.item.collected ? '#00CB6B' : '#999999'" :text="props.item.collectCounts"></u-text>
					</view>
					<view class="detail-item-box" @click="handleTask('liked')">
						<up-icon v-if="props.item.liked" :size="24" name="/static/solver-home/recommend/like-icon-active.png"></up-icon>
						<up-icon v-else :size="24" name="/static/solver-home/recommend/like-icon.png"></up-icon>
						<u-text margin="0 0 0 10rpx" :color="props.item.liked ? '#00CB6B' : '#999999'" :text="props.item.likeCounts"></u-text>
					</view>
					<view class="detail-item-box">
						<up-icon v-if="props.item.commented" :size="24" name="/static/solver-home/recommend/commet-icon-active.png"></up-icon>
						<up-icon v-else :size="24" name="/static/solver-home/recommend/commet-icon.png"></up-icon>
						<u-text margin="0 0 0 10rpx" :color="props.item.commented ? '#00CB6B' : '#999999'" :text="props.item.commentCounts"></u-text>
					</view>
				</view>
			</view>
			<view class="handle-box">
				<u-text
					prefixIcon="clock"
					color="#777777"
					:iconStyle="{
						paddingTop: '3rpx',
						marginRight: '8rpx'
					}"
					:size="12"
					:text="`距结束  ${format(props.item.endOn)}`"
				></u-text>
				<view class="btn-box">
					<up-button shape="circle" color="#00CB6B" size="normal" text="去投标" @click="jumpToDetail"></up-button>
				</view>
			</view>
		</template>
	</u-card>
</template>

<script lang="ts" setup>
// import { ref } from 'vue'
import type { PropType } from 'vue';
import Api from '@/api/index';
import { requestType } from '@/utils/request';

defineOptions({
	name: 'RecommendListItem'
});

const props = defineProps({
	item: {
		type: Object as PropType<API.RecommendResponse>,
		default: () => ({})
	},
	index: {
		type: Number,
		default: 0
	}
});

const emit = defineEmits<{
	(e: 'setHandle', handleObj: changeHandleType): void;
}>();

// 处理收藏、点赞的request返回值类型
type handleType = Promise<requestType<API.CollectResponse>> | Promise<requestType<API.LikeResponse>> | null;

// 点击收藏、点赞
const handleTask = (sign: TaskHandleType) => {
	let queryApi: handleType = null;
	const taskId = props.item.id;
	// 定义操作类型，是新增还是删除
	let handleSign: changeHandleType['handleSign'] = 'add';
	// 如果是收藏
	if (sign === 'collected') {
		// 收藏要加1
		if (props.item.collected === false) {
			handleSign = 'add';
			queryApi = Api.recommend.queryCollectTask(taskId);
		} else {
			handleSign = 'delete';
			queryApi = Api.recommend.cancelCollectTask(taskId);
		}
	} else if (sign === 'liked') {
		// 点赞要加1
		if (props.item.liked === false) {
			handleSign = 'add';
			queryApi = Api.recommend.queryLikeTask(taskId);
		} else {
			handleSign = 'delete';
			queryApi = Api.recommend.cancelLikeTask(taskId);
		}
	}
	if (queryApi) {
		queryApi.then((res) => {
			emit('setHandle', {
				sign,
				handleSign,
				taskId
			});
		});
	}
};

// 格式化并计算剩余时间
const format = (endTime: Date) => {
	const now = new Date();
	const end = new Date(endTime);
	const diff = end.getTime() - now.getTime();
	const days = Math.floor(diff / (24 * 3600 * 1000));
	const hours = Math.floor((diff % (24 * 3600 * 1000)) / (3600 * 1000));
	const minutes = Math.floor((diff % (3600 * 1000)) / (60 * 1000));
	const seconds = Math.floor((diff % (60 * 1000)) / 1000);

	if (days > 0) {
		if (hours > 0) {
			return `${days}天${hours}小时`;
		} else {
			return `${days}天${minutes}分钟`;
		}
	} else {
		if (hours > 0) {
			return `${hours}小时${minutes}分钟`;
		} else {
			return `${minutes}分钟${seconds}秒`;
		}
	}
};

// 跳转到详情
const jumpToDetail = (item: API.RecommendResponse) => {
	debugger
	uni.navigateTo({
		url: `/pages/solver/home/detail/index`
	});
};
</script>

<style lang="scss" scoped>
.title-box,
.tag-content {
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.tag-box {
	width: calc(100% - 80px);
	white-space: nowrap;
	padding: 20rpx 0;
	.tag-item-box {
		display: inline-block;
		margin-left: 15rpx;
		&:nth-child(1) {
			margin-left: 0;
		}
	}
}

.location-box {
	width: 80px;
}

@mixin w100-mt10 {
	width: 100%;
	margin-top: 10rpx;
}

.attachment-content {
	@include w100-mt10;
	.attachment-box {
		width: 100%;
		white-space: nowrap;
		.attachment-item-box {
			display: inline-block;
			margin-left: 15rpx;
			&:nth-child(1) {
				margin-left: 0;
			}
		}
	}
}

.detail-content {
	@include w100-mt10;
	display: flex;
	gap: 10rpx;
	.detail-left {
		width: 100px;
		display: flex;
	}
	.detail-right {
		width: calc(100% - 100px - 10rpx);
		display: flex;
		justify-content: flex-end;
		align-items: center;
		gap: 30rpx;
		.detail-item-box {
			display: flex;
			flex-direction: row;
		}
	}
}

.handle-box {
	@include w100-mt10;
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 20rpx;
	.btn-box {
		width: 80px;
	}
}
</style>
